<template>
  <section class="section sec-3" id="sec-3">
    <h2 class="mo-title txt-center">Product Class<br />产品分类</h2>
    <div class="mo-max-size-box mo-lr-box ma-top-30">
      <div class="left">
        <img class="mo-cover" src="/product.jpg" />
        <div class="text-box">
          <h3 class="mo-sub-title">New Product Launch</h3>
          <div>
            <a
              target="_blank"
              href="https://www.amazon.de/stores/ASOBEAGE/ASOBEAGE/page/F30EEDBD-492B-4ABF-ACB7-EBFB7E86123C?ref_=cm_sw_r_ud_ast_store_FXA3PVSC83VYGZJK58H9"
              class="mo-btn white"
              >Visit Store</a
            >
          </div>
        </div>
      </div>
      <div class="right">
        <div class="list">
          <template v-for="(item, index) in categoryList" :key="index">
            <div class="item">
              <img class="bg" :src="item.bg" />
              <h3 class="title">{{ item.title }}</h3>
              <p class="desc">{{ item.desc }}</p>
              <button @click="scrollToDom('#' + item.id)" class="mo-btn small">
                {{ item.btn }}
              </button>
            </div>
          </template>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { scrollToDom } from '../util';
export default {
  name: 'co-section-3',
  data() {
    return {
      categoryList: [
        {
          bg: '/product-1.png',
          title: 'Home Furnishings',
          desc: '居家用品',
          btn: 'More',
          btnTarget: 'home',
          id: 'sec-4',
        },
        {
          bg: '/product-2.png',
          title: 'Kitchen Supplies',
          desc: '厨房用品',
          btn: 'More',
          btnTarget: 'kitchen',
          id: 'sec-5',
        },
        {
          bg: '/product-3.png',
          title: 'Pet Supplies',
          desc: '宠物用品',
          btn: 'More',
          btnTarget: 'pet',
          id: 'sec-6',
        },
      ],
    };
  },
  methods: {
    scrollToDom,
  },
};
</script>
<style lang="less" scoped>
.sec-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .left {
    width: 35%;
    padding-bottom: 10px;
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: calc(100% - 10px);
      top: 0;
      left: 0;
      background-color: #000;
    }

    .mo-cover {
      position: absolute;
      height: calc(100% - 10px);
      top: 0;
      left: 0;
      opacity: 0.8;
    }

    .text-box {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0 10% 10% 0;

      h3 {
        color: #fff;
      }

      div {
        text-align: right;
      }

      button {
        margin-top: 16px;
      }
    }
  }

  .right {
    width: 65%;
    .list {
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      .item {
        position: relative;
        width: calc(50% - 10px);
        height: 200px;
        background: #eeeeee;
        box-sizing: border-box;
        margin: 0 10px 10px 0;
        padding: 50px 10px 10px 32px;

        &:nth-child(2n) {
          margin-right: 0;
        }

        .bg {
          position: absolute;
          bottom: 20px;
          right: 10%;
          width: auto;
          height: 120px;
        }

        .title {
          font-size: 12px;
          color: #424c4c;
          position: relative;
        }

        .desc {
          font-size: 16px;
          color: #000000;
          position: relative;
          margin-top: 10px;
        }

        button {
          margin-top: 20px;
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .sec-3 {
    height: auto;
    .left {
      width: 100%;
      height: 50vh;
      padding: 0;
    }

    .right {
      width: 100%;
      height: auto;

      .list {
        margin-left: 0;
        .item {
          width: 100%;
          margin: 0 0 20px 0;
        }
      }
    }
  }
}
</style>
